<template>
  <div class="title" @mousedown="mousedownFn($event)" @mouseup="mouseupFn($event)" @mousemove="mousemoveFn($event)">
	  <span class="item" :style="baseItemStyle" :class="{curItem:curItem==index}" @click="clickItem(index)" :key='index' v-for="(item,index) in title">{{item.name}}</span>
  </div>
</template>

<script>
export default {
  name: 'title',
  data(){
	  return {
		  curItem:0,
		  baseItemStyle:{
			  fontSize:"16px",
			  color:"#fff",
			  startX:0,
			  moveX:0
		  }
	  }
  },
  props: {
     title:{
		 type:Array,
		 default:()=>{
			 return []
		 }
	 },
	 titleStyle:{
		 type:Object,
		 default:()=>{
		 	return {}
		 }
	 }
  },
  methods:{
	  clickItem(index){
		  this.curItem=index
		  this.$emit('clickItem',index)
	  },
	  mousedownFn(e){
		  this.startX=e.pageX
		  var scrollLeft=e.currentTarget.scrollLeft
		  this.mousemoveFn=(e)=>{
			  e.preventDefault()
			  this.moveX=e.pageX-this.startX
			  e.currentTarget.scrollLeft=scrollLeft-this.moveX
		  }
	  },
	  mouseupFn(){
		  this.mousemoveFn=()=>{
		  	 return false	  
		  }
	  },
	  mousemoveFn(e){
		  return false
	  }
  },
  watch:{
	  titleStyle(val,oldval){
		  this.baseItemStyle=Object.assign({}, this.baseItemStyle, val)
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.title{
	padding: 10px 0;
	font-size: 18px;
	color: #fff;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	height: 30px;
	line-height: 30px;
	.item{
		display: inline-block;
		padding: 0 25px;
		width: auto;
		&:hover{
			cursor: pointer;
		}
	}
	.curItem{
		font-weight: bold;
	}
	
}
</style>
